
<template>
    <section id="section">
        <div class="main">
            <div class="main-container">
                <div class="content">
                    <h1>欢迎来到传统文化体验馆</h1>
                    <p>——国风爱好者聚集地</p>
                    <button @click="$router.push('/首页')">开始体验</button>
                </div>
            </div>
        </div>
    </section>
</template>

<script>
export default {
    name: 'IntroductionPage',
    }
</script>

<style scoped>
section {
    height: 100vh; /* 高度 */
}

.main {
    height: 100vh; /* 高度 */
    width: 100vw; /* 宽度 */
    background-size: cover; /* 背景图片大小 */
    background-color: #940505;
    z-index: 1; /* 层级 */
}
    
.main-container {
    height: 100vh; /* 高度 */
    width: 100vw; /* 宽度 */
    padding: 0; /* 内边距 */;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    margin-top: 0;
}

.content{
    display: flex; /* 布局 */
    flex-direction: column; /* 垂直布局 */
    justify-content: center; /* 垂直居中 */
    margin-left: 100px; /* 左外边距 */;
    height: 100vh; /* 高度 */
    width: 100vw; /* 宽度 */
}

.content button{
    cursor: pointer; /* 鼠标指针 */;
}

.main h1{
    font-size: 100px; /* 字体大小 */
    font-weight: normal; /* 字体粗细 */
    color: #ffffff; /* 字体颜色 */
    font-family: '宋体'; /* 字体 */
    margin-top: 0; /* 上外边距 */
    margin-bottom: 0; /* 下外边距 */
}

.main p{
    font-size: 15px; /* 字体大小 */
    border-radius: 10px; /* 圆角 */
    color: rgb(255, 255, 255); /* 字体颜色 */
}
.main button{
    margin-top: 30px; /* 上外边距 */
    font-size: 20px; /* 字体大小 */
    border-radius: 10px; /* 圆角 */
    color: rgb(3, 3, 3); /* 字体颜色 */ 
    height: 50px;
    width: 150px;
    font-family: '楷体';
}
</style>